{% extends 'myhome/index.html'%}
{% block title %}
<title>地址管理</title>
{% endblock %}

{% block css %}
<link href="/static/myhome/css/personal.css" rel="stylesheet" type="text/css">
<link href="/static/myhome/css/addstyle.css" rel="stylesheet" type="text/css">
{% endblock %}


{% block con %}

        
<div class="center">
    <div class="col-main">
        <div class="main-wrap">

            <div class="user-address">
                
                <div class="clear"></div>
                <a class="new-abtn-type" data-am-modal="{target: '#doc-modal-1', closeViaDimmer: 0}">添加新地址</a>
                <!--例子-->
                <div class="am-modal am-modal-no-btn" id="doc-modal-1">

                    <div class="add-dress">

                        <!--标题 -->
                        <div class="am-cf am-padding">
                            <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">新增地址</strong> / <small>Add&nbsp;address</small></div>
                        </div>
                        <hr/>

                        <div class="am-u-md-12 am-u-lg-8" style="margin-top: 20px;">
                            <form class="am-form am-form-horizontal" action="{% url 'myhome_myinfo_addressedit' %}?uid={{ data.id }}" method="post">
                            {% csrf_token %}
                                <div class="am-form-group">
                                    <label for="user-name" class="am-form-label">收货人</label>
                                    <div class="am-form-content">
                                        <input type="text" id="user-name" name="shr" value="{{ data.shr }}" placeholder="收货人">
                                    </div>
                                </div>

                                <div class="am-form-group">
                                    <label for="user-phone" class="am-form-label">手机号码</label>
                                    <div class="am-form-content">
                                        <input id="user-phone" name="shdh" value="{{ data.shdh }}" placeholder="手机号必填" type="text">
                                    </div>
                                </div>
                                <div class="am-form-group">
                                    <label for="user-address" class="am-form-label">所在地</label>
                                    <div class="am-form-content address">
                                        <select  name="sheng">
                                                <option>{{ data.sheng }}</option>
                                            {% for v in citys %}
                                                <option value={{ v.id }}>{{ v.name }}</option>
                                            {% endfor %}
                                        </select>
                                        <select  name="shi">
                                            <option>{{ data.shi }}</option>
                                            <option></option>
                                        </select>
                                        <select  name='xian'>
                                            <option>{{ data.xian }}</option>
                                            <option></option>
                                        </select>
                                    </div>
                                </div>

                                <div class="am-form-group">
                                    <label for="user-intro" class="am-form-label">详细地址</label>
                                    <div class="am-form-content">
                                        <textarea class="" rows="3" name="info" id="user-intro" placeholder="输入详细地址">{{ data.info }}</textarea>
                                        <small>100字以内写出你的详细地址...</small>
                                    </div>
                                </div>

                                <div class="am-form-group">
                                    <div class="am-u-sm-9 am-u-sm-push-3">
                                        <button class="am-btn am-btn-danger" id="addressadd">保存</button>
                                        <a href="{% url 'myhome_myinfo_address' %}" id="addressclose" class="am-close am-btn am-btn-danger" data-am-modal-close>取消</a>
                                    </div>
                                </div>
                            </form>
                        </div>

                    </div>

                </div>

            </div>

            <script type="text/javascript">
                $(document).ready(function() {                          
                    $(".new-option-r").click(function() {
                        $(this).parent('.user-addresslist').addClass("defaultAddr").siblings().removeClass("defaultAddr");

                    });
                    


                    var $ww = $(window).width();
                    if($ww>640) {
                        $("#doc-modal-1").removeClass("am-modal am-modal-no-btn")
                    }
                    
                })
            </script>

            <div class="clear"></div>

        </div>
        
    </div>

    <aside class="menu">
        <ul>
            <li class="person">
                <a href="#">个人中心</a>
            </li>
            <li class="person">
                <a href="#">个人资料</a>
                <ul>
                    <li> <a href="{% url 'myhome_myinfo_introduction' %}">个人信息</a></li>
                    <li> <a href="#">安全设置</a></li>
                    <li class="active"> <a href="{% url 'myhome_myinfo_address' %}">收货地址</a></li>
                </ul>
            </li>
            <li class="person">
                <a href="#">我的交易</a>
                <ul>
                    <li><a href="{% url 'myhome_myinfo_order' %}">订单管理</a></li>
                    <li> <a href="#">退款售后</a></li>
                </ul>
            </li>
            <li class="person">
                <a href="#">我的资产</a>
                <ul>
                    <li> <a href="#">优惠券 </a></li>
                    <li> <a href="#">红包</a></li>
                    <li> <a href="#">账单明细</a></li>
                </ul>
            </li>

            <li class="person">
                <a href="#">我的小窝</a>
                <ul>
                    <li> <a href="#">收藏</a></li>
                    <li> <a href="#">足迹</a></li>
                    <li> <a href="#">评价</a></li>
                    <li> <a href="#">消息</a></li>
                </ul>
            </li>

        </ul>

    </aside>
</div>

<script type="text/javascript">
    // 获取页面中的 下拉选框 绑定change事件
    $('.address select').click(function(){
        // 获取当前选中的元素的 id
        var id = $(this).val()

        // 发送ajax请求,获取下一级的数据
        $.get('{% url "myhome_getcitys" %}',{'id':id},function(data){
            // 判断返回的数据,如果为空,
            if(data.length == 0){ return }

            // 判断级别
            if(data[0].level == 2){
                var sel = $('.address select[name=shi]')
            }else if(data[0].level == 3){
                var sel = $('.address select[name=xian]')
            }

            var ops = ''
            // 遍历获取的结果,拼接成option选项
            for (var i = 0; i < data.length; i++) {
                ops += '<option value="'+data[i]['id']+'">'+data[i].name+'</option>'
            }
            // 把拼接好的选项加入到下拉框中
            sel.html(ops)

        },'json')
    })

    


</script>

{% endblock %}